<template>
    <input v-model="message" type="text" id="ipt">
    <input v-model="message2" type="text">
    <button @click="stopwatch">停止监听</button>
  </template>
  
  
  <script setup lang="ts">
  import { watchEffect, ref } from 'vue';
  let message = ref<string>('飞机')
  let message2 = ref<string>('飞机')
  
  const stop = watchEffect((oninvalidate) => {
    // let ipt:HTMLInputElement=document.querySelector('#ipt') as HTMLInputElement
    console.log('message---->', message.value)
    // console.log('message2---->', message2.value)
    // console.log(ipt,'eeeeer')
  
    oninvalidate(() => {
      console.log('before') //可以有新的回调函数，在监听之前执行
    })
  },{
    flush:'post',
    onTrigger(e){
      debugger // 调试的时候配置
    }
  })
  
  const stopwatch = () => stop() // 停止监听的方式
  
  </script>